<template>
  <div>
    <!-- <p>toRefs demo {{nameRef}} {{ageRef}}</p> -->
    <p>toRefs demo {{name}} {{age}}</p>
    <!-- <p>toRefs demo {{state.name}} {{state.age}}</p> -->

  </div>
</template>

<script>
import {
  ref,
  toRef,
  toRefs,
  reactive
} from 'vue'
export default {
  name: 'ToRefs',
  setup() {
     const state = reactive({
      age: 20,
      name: 'cheng'
    })

    const stateAsRefs = toRefs(state) // 将响应式对象，变成普通对象

    // const { age: ageRef, name: nameRef } = stateAdRefs  // 每个属性，都是ref对象

    // return {
    //   ageRef,
    //   nameRef
    // }

    setTimeout(() => {
      state.age = 25
    }, 2000)

    return stateAsRefs

    // return {
    //   state
    // }
  }
}
</script>